<template>
  <div class="container-pt">
    <van-nav-bar fixed title="详情" @click-left="$router.back()" left-arrow />
    <div class="content-box">
      <div class="art-tit">{{ item.title }}</div>
      <div class="art-desc">
        <span>时间:{{ new Date(item.create_date).toLocaleString() }}</span>
        <span>分类：{{ item.catename }}</span>
        <span>阅读({{ item.click }})</span>
      </div>
      <van-divider />
      <div class="art-content" v-html="item.content"></div>
    </div>
    <van-cell>
      <h3 slot="title" class="group-title">相关推荐</h3>
    </van-cell>
    <recommend-list :list="recommend" />
    <van-grid clickable class="bot" :column-num="2">
      <van-grid-item
        icon="like-o"
        text="收藏"
        @click="toggleCollect"
        :class="{ active: item.isCollect }"
      />
      <van-grid-item
        icon="thumb-circle-o"
        text="点赞"
        @click="toggleLike"
        :class="{ active: item.isLike }"
      />
    </van-grid>
  </div>
</template>

<script>
import { getDetail, updateCollect, updateLike } from '@/api/artice'
import RecommendList from '../components/recommend-list.vue'
export default {
  name: 'Show',
  components: { RecommendList },
  data () {
    return {
      item: {},
      recommend: [],

    }
  },
  async created () {
    const res = await getDetail(this.$route.params.id)
    this.item = res.data.info
    this.recommend = res.data.recommend
  },
  computed: {
    likeAction () {
      if (this.item.isLike) {
        return 'del'
      }
      else {
        return 'add'
      }
    },
    collectAction () {
      if (this.item.isCollect) {
        return 'del'
      }
      else {
        return 'add'
      }
    }
  },
  methods: {
    async toggleLike () {
      await updateLike({ id: this.item.id, action: this.likeAction })
      this.item.isLike = !this.item.isLike
      if (this.item.isLike) {
        this.$toast.success('点赞成功')
      } else {
        this.$toast.success('取消点赞')
      }
    },
    async toggleCollect () {
      await updateCollect({ id: this.item.id, action: this.collectAction })
      this.item.isCollect = !this.item.isCollect
      if (this.item.isCollect) {
        this.$toast.success('收藏成功')
      } else {
        this.$toast.success('取消收藏')
      }
    }
  }
}
</script>
<style scoped lang="less">
.content-box {
  padding: 20px 20px;
}
.art-tit {
  font-size: 36px;
  line-height: 44px;
  margin-bottom: 20px;
}
.art-desc {
  font-size: 28px;
  color: #aaa;
  span {
    margin-right: 20px;
  }
}
.bot {
  position: fixed;
  bottom: 0;
  width: 100%;
}
/deep/ .van-grid-item__content {
  padding: 20px 0;
}
/deep/ .van-grid-item__text {
  margin-top: 0 !important;
}
.group-title {
  color: #1989fa;
}
.active {
  color: #fec635;
}
</style>